<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单计数器</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .counter-container {
            text-align: center;
        }

        #count {
            font-size: 48px;
            margin: 20px;
            min-width: 60px;
            display: inline-block;
        }

        button {
            padding: 10px 20px;
            font-size: 18px;
            margin: 0 10px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        button:active {
            transform: scale(0.98);
        }

        /* 不同数值的颜色样式 */
        .positive {
            color: #2ecc71;
        }

        .negative {
            color: #e74c3c;
        }

        .zero {
            color: #333;
        }
    </style>
</head>
<body>
    <div class="counter-container">
        <h2>简单计数器</h2>
        <div>
            <button id="decrement">-</button>
            <span id="count" class="zero">0</span>
            <button id="increment">+</button>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const countElement = document.getElementById('count');
        const incrementBtn = document.getElementById('increment');
        const decrementBtn = document.getElementById('decrement');

        // 初始化计数器
        let count = 0;

        // 更新显示
        function updateDisplay() {
            countElement.textContent = count;
            
            // 根据数值更新颜色
            if (count > 0) {
                countElement.className = 'positive';
            } else if (count < 0) {
                countElement.className = 'negative';
            } else {
                countElement.className = 'zero';
            }
        }

        // 增加数值
        incrementBtn.addEventListener('click', () => {
            count++;
            updateDisplay();
        });

        // 减少数值
        decrementBtn.addEventListener('click', () => {
            count--;
            updateDisplay();
        });

        // 初始化显示
        updateDisplay();
    </script>
</body>
</html>